<template>
	 <HeaderNav active-index="3"></HeaderNav>
	 <TaskContainer>
		 <div class="toolbar">
			  <el-button type="primary" @click="handleAdd">添加人员组
				<template #icon>
					<el-icon><CirclePlus /></el-icon>
				</template>
			  </el-button>
			  <el-button type="danger" @click="batchRemove">批量删除
					<template #icon>
						<el-icon><Delete /></el-icon>
					</template>
			  </el-button>
		 </div>
		 <el-table :data="list" style="width: 100%" border ref="tb">
			 <el-table-column type="selection" width="55" />
		     <el-table-column prop="id" label="序号" />
		     <el-table-column prop="name" label="组名"/>
			 <el-table-column prop="num" label="人数"/>
		     <el-table-column label="录入时间">
			   <template #default="scope">
				 <div style="display: flex; align-items: center">
				   <el-icon><timer /></el-icon>
				   <span style="margin-left: 10px">{{ scope.row.create_time }}</span>
				 </div>
			   </template>
			</el-table-column>
		     <el-table-column fixed="right" label="操作" width="310">
		       <template #default="scope">
				 <el-button type="info" size="small" @click="handleApply(scope.$index, scope.row)">分配人员</el-button>
				 <el-button type="warning" size="small" @click="handleTask(scope.$index, scope.row)">分配任务</el-button>
		         <el-button  size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
		         <el-button type="danger" size="small"  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
		       </template>
		     </el-table-column>
		</el-table>
	
	 </TaskContainer>
</template>

<script>
import HeaderNav from "@/components/HeaderNav.vue"
import TaskContainer from "@/components/TaskContainer.vue"
import Condition from "@/components/Condition.vue"
export default {
	components: {
		HeaderNav,
		TaskContainer, 
		Condition,
	},
	data() {
		return {
			list: [
			  {
				id: 1,
			    create_time: '2016-05-03 11:22:33',
				num: 10,
				name: '正常组' 
			  },
			  {
			  	id: 2,
			    create_time: '2016-05-03 11:22:33',
				num: 20,
			    name: '第一小组' 
			  },
			]
		}
	},
	methods: {
		handleAdd(event) {
			this.$layer.open({
				type: 2,
				title: '添加人员组',
				shadeClose: true,
				shade: 0.5,
				area: ['480px', '200px'],
				btn: ['保存', '关闭'] ,
				content: '/group/add',
				yes: (index, layero) => {
					layer.close(index);
				}
			})
		},
		batchRemove(event) {
			let rows = this.$refs.tb.getSelectionRows();
			console.log(rows);
		},
		handleApply(index, row) {
			this.$layer.open({
				type: 2,
				title: '分配人员 - ' + row.name,
				shadeClose: true,
				shade: 0.5,
				area: ['580px', '780px'],
				btn: ['保存', '关闭'] ,
				content: '/group/apply',
				yes: (index, layero) => {
					layer.close(index);
				}
			})
		},
		handleTask(index, row) {
			this.$layer.open({
				type: 2,
				title: '分配任务 - ' + row.name,
				shadeClose: true,
				shade: 0.5,
				area: ['1300px', '820px'],
				btn: ['保存', '关闭'] ,
				content: '/group/task-list',
				yes: (index, layero) => {
					layer.close(index);
				}
			})
		}
	}
}
</script>

<style scoped>
.table-modules {
	padding: 10px 20px;
}
.table-modules span {
	padding: 2px 10px;
	margin: 0 5px;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.toolbar {
	position: relative;
	right: 10px;
	z-index: 200;
	text-align: right;
	margin: 20px;
	flex: 1 1 auto;
}
</style>